<template>
  <div class="search">
    <el-input v-model="selectList.title" size="mini" placeholder="请输入搜索内容" style="width:200px"></el-input>
    <el-select v-model="selectList.kind" clearable  size="mini" placeholder="类别">
      <el-option v-for="item in kindList" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select v-model="selectList.size" clearable  size="mini" placeholder="尺寸">
      <el-option v-for="item in sizeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select v-model="selectList.quick" clearable  size="mini" placeholder="速别">
      <el-option
        v-for="item in quickList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-select v-model="selectList.texture" clearable  size="mini" placeholder="材质">
      <el-option
        v-for="item in textureList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-select v-model="selectList.system" clearable  size="mini" placeholder="制动系统">
      <el-option
        v-for="item in systemList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" size="mini" @click="searchWords">搜索</el-button>
    <el-button size="mini" type="primary" icon="el-icon-plus">
      <slot></slot>
    </el-button>
  </div>
</template>

<script>
import {
  kindList,
  sizeList,
  quickList,
  textureList,
  systemList
} from "../../data";

export default {
  name: "searchBar",
  data() {
    return {
      selectList: {
        title: "",
        kind: "",
        size: "",
        quick: "",
        texture: "",
        system: ""
      },

      kindList: kindList,
      sizeList: sizeList,
      quickList: quickList,
      textureList: textureList,
      systemList: systemList
    };
  },
  props: {},
  mounted() {
    this.kindListArr = this.kindList;
  },
  methods: {
    searchWords() {
      // eslint-disable-next-line no-console
      this.$emit("search", this.selectList);
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.search {
  margin: 0px 0 30px;
}

.el-input {
  margin-right: 10px;
}

.el-select {
  width: 150px;
  margin-right: 10px;
}
</style>
